import React, {PureComponent, Fragment} from 'react';
import {connect} from 'dva';
import {Form, Input, InputNumber, Button, Table} from 'antd';
import {Row, Col, Alert} from 'antd';
import styles from './index.less'
const FormItem = Form.Item;


@connect(({gift, loading}) => ({
  gift,
  loading: loading.models.gift,
}))
class SearchForm extends PureComponent {
  formRef = React.createRef();

  state = {}

  componentDidMount() {
  }

  columns = [
    {
      title: '赠送编号',
      key: 'order_number',
      'dataIndex': 'order_number'
    },
    {
      title: '赠送件数',
      key: 'total',
      dataIndex: 'total'
    },
  ]

  handleSearch = value => {
    const {dispatch} = this.props;
    dispatch({
      type: 'gift/gift',
      payload: value
    })
  }

  renderSearchForm() {
    return (
      <Form onFinish={this.handleSearch} ref={this.formRef} hideRequiredMark>
        <Row>
          <Col xs={24} sm={8}>
            <FormItem
              name={'order_number'}
              label="订单编号"
              rules={
                [
                  {
                    pattern: /^\d{18,19}$/,
                    message: '订单号格式不正确,应为18或19位数字!'
                  },
                  {
                    required: true,
                    message: '订单号必填!'
                  },
                ]
              }>
              <Input />
            </FormItem>
          </Col>
          <Col xs={{span: 24, offset: 16}} sm={{span: 4, offset: 2}}>
            <FormItem>
              <Button type="primary" htmlType="submit">
                获取免费订单
              </Button>
            </FormItem>
          </Col>
        </Row>
      </Form>
    )
  }

  render() {
    const {
      gift: {data},
      loading
    } = this.props
    return (
      <div className={styles.tableList}>
        <div className={styles.tableListForm}>{this.renderSearchForm()}</div>
        <Table
          columns={this.columns}
          dataSource={data}
          pagination={false}
          loading={loading}
        />
      </div>
    )
  }
}

export default SearchForm
